import React, { PureComponent } from 'react';
import { Card, Avatar, Icon, Tag, List, Row, Col } from 'antd';
import Link from 'umi/link';
import numeral from 'numeral';
import styles from '../../styles.less'
import {  MiniArea, MiniBar, MiniProgress } from '@/components/Charts';

import moment from 'moment';

class DeviceMiniChart extends PureComponent {

    render() {

        const index1 = [];

        const times = [];

        const beginDay = new Date();
        beginDay.setMonth(beginDay.getMonth() + 1 - 12);
        const yData = [];
        const monthData = [];

        for (let i = 12; i > 0; i -= 1) {
            // times.push(moment(beginDay).format('YYYY-MM'));
            // yData.push( numeral(100*Math.random()).format('0,0.00'));

            monthData.push({
                x: moment(beginDay).format('YYYY-MM'),
                y: parseFloat(numeral(100 * Math.random()).format('0,0.00'))
            });
            beginDay.setMonth(beginDay.getMonth() + 1);
        }


         
        return (
            <Card size="small" title="统计指标" style={{ padding: 0 ,marginBottom: 24 }}  >
                <Card.Grid style={{ width: '100%', padding: 0 }}>
                    <Row gutter={24} style={{ padding: 0, margin: 0 }} >
                        <Col span={8} offset={16}>
                            <span className={styles.spanStyle} style={{ fontSize: '14px',paddingTop:'6px',width:'120px' }}>月综合效率:80 %</span>
                        </Col>
                    </Row>
                    <Row gutter={24} style={{ padding: 0, margin: 0, height: '50px' }} >
                        <MiniBar data={monthData} ></MiniBar>
                    </Row>
                </Card.Grid>
                <Card.Grid style={{ width: '100%', padding: 0 }}>
                    <Row gutter={24} style={{ padding: 0, margin: 0 }} >
                        <Col span={8} offset={16}>
                            <span className={styles.spanStyle} style={{ fontSize: '14px',paddingTop:'6px',width:'120px' }}>月发电量:2000 kw</span>
                        </Col>
                    </Row>
                    <Row gutter={24} style={{ padding: 0, margin: 0, height: '50px' }} >
                        <MiniArea data={monthData} ></MiniArea>
                    </Row>
                </Card.Grid>
                <Card.Grid style={{ width: '100%', padding: 0 }}>
                    <Row gutter={24} style={{ padding: 0, margin: 0 }} >
                        <Col span={8} offset={16}>
                            <span className={styles.spanStyle} style={{ fontSize: '14px',paddingTop:'6px',width:'120px' }}>月发电小时:230 h</span>
                        </Col>
                    </Row>
                    <Row gutter={24} style={{ padding: 0, margin: 0, height: '50px' }} >
                        <MiniBar data={monthData} ></MiniBar>
                    </Row>
                </Card.Grid>
            </Card>


        );
    }
}

export default DeviceMiniChart;
